<template>
	<view>
		<u-tabs :list="list1" @click="click"></u-tabs>
		<view>组件</view>
		<view style="padding: 20px;">
			<u-button type="primary" text="确定"></u-button>
			<u-button type="primary" :plain="true" text="镂空"></u-button>
			<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
			<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
			<u-button type="primary" loading loadingText="加载中"></u-button>
			<u-button type="primary" icon="map" text="图标按钮"></u-button>
			<u-button type="primary" shape="circle" text="按钮形状"></u-button>
			<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			<u-button type="primary" size="small" text="大小尺寸"></u-button>
		</view>

		<!-- 修改颜色 -->
		<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30"
			:second="0"></uni-countdown>

		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						{{item.content}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>


		<mySte :value="d1" @input="d1=$event"></mySte>
		<steper v-model="d2"></steper>
		<button @click="addFive">加+5</button>
		<view class="d1" :style="{width:d1+'px',height:d1+'px',lineHeight: d1+'px'}">{{d1}}</view>
		<view class="d2" :style="{width:d2+'px',height:d2+'px',lineHeight: d2+'px'}">{{d2}}</view>
		<input type="text" v-model.number="d2">
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import mySte from '@/components/steper/steper.vue'
	export default {
		components: {
			mySte
		},
		data() {
			return {
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				d1: 100,
				d2: 120,
				disabled: true,
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
			}
		},
		methods: {
			addFive() {
				uni.$emit("add", 5)
			},
			change(e) {
				this.current = e.detail.current;
			},
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 3000)
			},
		}
	}
</script>

<style lang="less">
	.d1,
	.d2 {
		border-radius: 50%;
		border: 2px solid aqua;
		text-align: center;
	}
</style>
